<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="false" title="AI创作大赛" class="my-nav-ber-a-box mallunavbar"></unavbar>
		<image :src="info.init_image_url" style="height:364rpx" mode="aspectFill" class="rili-top"></image>
		<!-- <view class="rili-gap"></view> -->
		<view class="rili-content black-bg">
			<view class="flex justify-between align-center w100">
				<view class="flex10 align-center w100">
					<!-- <image :src="info.banner_list[0]" mode="aspectFill" class="rili-avatar"></image> -->
					<view class="u-m-b-10 u-font-40">{{info.opus_name}}</view>
					<!-- <view class="u-m-l-0 u-font-24">原创作品，作品内容必须有龙湾区域辦识度元素</view> -->
				</view>
				<!-- <view class="">
					<u-button type="primary" size="mini" shape="circle">关注</u-button>
				</view> -->
			</view>
			<view class="flex justify-between align-center g1 u-m-b-30">
				<view class="u-m-l-0 u-font-24 flex align-center">
					<image src="http://cdn.haoyiai.com.cn/images/user_bg.jpg" style="margin-right:10px;border-radius:50%; width:90rpx; height:90rpx"></image>春夏
				</view>
				<view class="btn0">查看</view>
			</view>
			<view class="flex1 justify-between align-center g1 u-m-b-30">
				<view class="u-m-l-0 u-font-24 flex1 align-center  u-m-b-20">
					<view class="k1 u-m-b-20">作品描述</view>
					<view class="k2">{{info.prompt}}</view>
				</view>
				<view class="u-m-l-0 u-font-24 flex1 align-center">
					<view class="k1 u-m-b-20">画面描述</view>
					<view class="k2" style="border:0;padding-bottom:0">{{info.prompt}}</view>
				</view>
			</view>
			<view class="flex justify-between align-center g2 u-m-b-30">
				<view @click="tab(1)" class="u-m-l-0 u-font-24 flex1 align-center " :class="active == 1 ? 'active':''">
					创作信息
				</view>
				<view @click="tab(2)" class="u-m-l-0 u-font-24 flex1 align-center"  :class="active == 2 ? 'active':''">
					技术信息
				</view>
			</view>

			<view class="flex1 justify-between align-center g1 u-m-b-30" v-if="active == 1">
				<view class="u-m-l-0 u-font-24 flex1 align-center  ">
					<view class="k1 u-m-b-20 u-font-28  u-m-b-30">创作信息</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>创作时间</view>
						<view>{{info.created_at}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>模型主题</view>
						<view>{{info.style_model}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>风格选择</view>
						<view>仅投票可见</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>画面尺寸</view>
						<view>{{info.size_ratio}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>角色同人</view>
						<view>仅投票可见</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>融合模型</view>
						<view>{{info.sampler_model_name}}</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u" style="border:0">
						<view>参考图</view>
						<view>仅投票可见</view>
					</view>
				</view>
			</view>
			<view class="flex1 justify-between align-center g1 u-m-b-30" v-if="active == 2">
				<view class="u-m-l-0 u-font-24 flex1 align-center  ">
					<view class="k1 u-m-b-20 u-font-28  u-m-b-30">技术信息</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view style="flex: none;" class="line-1">链上Hash</view>
						<view class="u-text-right">0x3A6be93394382C2d9b1 EEb81 fE4ce515b45D7238#13</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>作品存证</view>
						<view>查看</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>机器编号</view>
						<view>OgQAsVQdGX</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>显卡</view>
						<view>NVIDIA Tesla V100-PCIE-32GB</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24 u-m-b-30" style="border:0">
						<view>消耗电量</view>
						<view>0.00065999996度</view>
					</view>
					<view class="k2 flex align-center justify-between u-font-24" style="border:0">
						<view>分辨率</view>
						<view>2816*2048</view>
					</view>
					
				</view>
				
			</view>

			<u-popup v-model="shareShow" mode="bottom">
				<view class="share-box">
					<image class="background-image" :src="shareImg"></image>
					<!-- <view class="opus_img">
						<image :src="info.opus_img" style="width:100%; height: 340rpx;"></image>
					</view>
					<view class="flex align-center justify-between info-desc">
						<view class="info-desc-text">
							<view>{{info.describe}}</view>
							<view>创作者：{{info.opus_author}}</view>
						</view>
						<view class="info-desc-right">
							<view class="info-desc-img">
								<tki-qrcode foreground="#333333" ref="qrcode" :val="QRcode" :showLoading="false" />								
							</view>
							<text>扫码投票</text>
						</view>
						
					</view> -->
				</view>
				<view class="footer-share">
					<view class="footer-share-title">分享到</view>
					<view class="flex justify-between align-center flex-wrap footer-share-list">
						<view v-for="(item,index) in shareList" :key="index" class="share-item" @click="shareClick(index)">
							<image :src="item.img" style="width:90rpx; height:90rpx;"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
			</u-popup>
			<view class="flex justify-between align-center">
				<view class="fx flex align-center justify-center" @click="uniShare">
					<image src="/static/images/img/36.png" style="width:42rpx; height:44rpx;margin-right:5px"></image>
					分享好友
				</view>
				<view class="fx2" @click="tp(info.id) && info.is_support == 0">
				 
					{{info.is_support == 1 ? '已投票' : '投一票' }} （{{info.vote_num}}）
				</view>
			</view>
			<!-- <view class="flex justify-between1 align-center u-m-t-50">
				<view @click="tab(1)" class="u-m-l-0 u-font-24 btn1" :class="active == 1 ? 'active' : '' ">参赛作品</view>
				<view @click="tab(2)"  class="btn1" :class="active == 2 ? 'active' : '' ">活动介绍</view>
				<view @click="tab(3)"  class="btn1" :class="active == 3 ? 'active' : '' ">获奖公示</view>
			</view> -->
			<!-- <view class="one flex  justify-between align-center u-m-t-48" v-if="active == 1">
				<view v-for="(item,index) in dataOne" :key="index" class="item">
					<image mode="widthFix" :src="'http://cdn.haoyiai.com.cn/images/user_bg.jpg'"></image>
						<view>{{item.name}}</view>
						<view @click="tp(item.id)">投票 {{item.hot}}</view>
				</view>
			</view> -->
			 <!-- <view class="rili-line line"></view> -->
			<!-- <view class="">
				<text class="rili-tag text-default u-font-22 text-bold" v-if="info.has_goods==1">实物</text>
				<text class="u-m-l-20 u-font-40 text-bold">{{info.title}}</text>
			</view> -->
			<!-- <view class="u-m-t-30 u-font-24 text-content" v-if="active == 2" v-html="info.introduce"></view>
			<view class="u-m-t-30 u-font-24 text-content" v-if="active == 3" >暂无</view> -->
		<!--	<view class="u-m-t-30 flex justify-between align-center">
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips">价格</view>
					<view class="u-m-t-10 u-font-30 text-bold">{{info.price}}</view>
				</view>
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips">发行总量</view>
					<view class="u-m-t-10 u-font-30 text-bold">{{info.num}}</view>
				</view>
			</view>
			<view class="u-m-t-30 flex justify-between align-center">
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips u-m-b-20">是否可转售</view>
					<u-icon name="checkbox-mark" size="30" color="#19be6b" v-if="info.sale_status==1"></u-icon>
					<u-icon name="close" size="30" color="#fa3534" v-else></u-icon>
				</view>
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips u-m-b-20">是否可转赠</view>
					<u-icon name="checkbox-mark" size="30" color="#19be6b" v-if="info.transfer_status==1"></u-icon>
					<u-icon name="close" size="30" color="#fa3534" v-else></u-icon>
				</view>
			</view>
			<view class="main-card u-m-t-30 flex justify-between align-center">
				<view class="text-tips u-font-24">发售时间：</view>
				<view class="u-font-30 text-bold">{{info.show_at}}</view>
			</view>
			<view class="main-card u-m-t-30">
				<view class="u-font-32 text-bold">认证信息</view>
				<view class="flex justify-between align-center u-m-t-54 u-font-26">
					<view class="text-tips">智能合约地址</view>
					<view class="flex align-center" @click="copy($myAppConfig.NFTAddress)">
						<view class="line-1 text-right u-m-r-10" style="width: 300rpx;">{{ $myAppConfig.NFTAddress }}</view>
						<u-icon name="order"></u-icon>
					</view>
				</view>
				<view class="flex justify-between align-center u-m-t-68 u-font-26">
					<view class="text-tips">NFT认证协议</view>
					<view class="line-1 text-right" style="width: 300rpx;">{{ $myAppConfig.NFTAgreement }}</view>
				</view>
				<view class="flex justify-between align-center u-m-t-68 u-font-26">
					<view class="text-tips">区块链网络</view>
					<view>{{ $myAppConfig.NFTNetwork }}</view>
				</view>
			</view>
			<view class="u-font-36 text-bold u-m-t-60">藏品详情</view>
			<view class="main-card u-m-t-40">
				<u-parse :html="info.desc" @imgtap="e => e.ignore()"></u-parse>
			</view>
			<view class="u-font-36 text-bold u-m-t-60">购买须知</view>
			<view class="main-card u-m-t-40">{{note.buy_note||''}}</view>
			<view class="u-font-36 text-bold u-m-t-60">权益须知</view>
			<view class="main-card u-m-t-40">{{note.power_note||''}}</view> -->
		</view>
	</view>
</template>

<script>	
	export default{
		data(){
			return{
				shareShow: false,
				active:1,
				id:'',
				info:{},
				note:{},
				limist:10,
				page :1,
				dataOne:[],
				QRcode: '',
				shareImg: '/static/images/share-bg.png',
				shareList:[
					{name: '微信', img: '/static/images/s1.png'},
					{name: '朋友圈', img: '/static/images/s2.png'},
					{name: 'QQ', img: '/static/images/s3.png'},
					{name: '复制链接', img: '/static/images/s4.png'},
					{name: '保存图片', img: '/static/images/s5.png'},
				]
			}
		},
		onLoad(data) {
			this.id = data.id||''
			this.loadData()
		},
		onReachBottom() {
			if(this.active == 1){
				this.page ++
				this.getOne(false, false)
			}
			
		},
		methods:{
			tp(id){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要投票吗？',
					success: data => {
						if (data.confirm) {
							that.$u.api.indexactivitysupport({id : id,}).then(res => {
							if(res.code == 200){
								uni.showToast({
									title:"投票成功",
									icon:"none"
								})
								
							}
							//that.getOne()
							that.loadData()
								// this.init()
								// this.$emit('restart')
							})
						}
					}
				});
				// this.$u.api.indexactivitysupport({
				// // this.$u.api.calendars_detail({
				// 	id : id,
				// }).then(res=>{
				// 	//this.dataOne = [...this.dataOne,...res.data.data]
				// })
			},
			getOne(){
				this.$u.api.indexactivitylist({
				// this.$u.api.calendars_detail({
					activityid: this.id,
					limist: this.limist,
					page: this.page,
				}).then(res=>{
					this.dataOne = [...this.dataOne,...res.data.data]
					//this.info = res.data
					// this.note = res.data.note
				})
			},
			getTwo(){
				this.$u.api.indexactivitylist({
				// this.$u.api.calendars_detail({
					activityid: this.id,
					limist: this.limist,
					page: this.page,
				}).then(res=>{
					this.dataOne = res.data.data
					//this.info = res.data
					// this.note = res.data.note
				})
			},
			tab(num){
				this.active = num
				// if(this.active == 1){
				// 	this.getOne()
				// }
				// if(this.active == 2){
				// 	this.getTwo()
				// }
			},
			loadData(){
				this.$u.api.indexactivityopus_detail({
				// this.$u.api.calendars_detail({
					id: this.id
				}).then(res=>{
					this.QRcode = this.baseUrl + '/h5/#/' + this.$mp.page.route + '?id=' + res.data.id
					this.info = res.data
					// console.log(this.QRcode);
					
				})
			},
			copy(data){
				uni.setClipboardData({
					data
				})
			},
			uniShare() {
				this.shareShow = true
				
				// setTimeout(()=>{
				// 	this.$refs.qrcode._makeCode();
				// },300)
			},
			txt(data){
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					}
				});
				// this.imgShow = false
			},
			shareClick(index){
				
				if(index == 0){
					
				}
				else if(index == 1){
					
				}
				else if(index == 2){
					
				}
				else if(index == 3){
					this.txt(this.QRcode)
				}
				else if(index == 4){
					this.saveImage()
				}
				setTimeout(()=>{
					this.shareShow = false
				},600)
				
			},		
			saveImage() {
			  const img = new Image();
			  img.src = this.shareImg; // 替换为你的图片路径
			  img.onload = () => {
				const canvas = document.createElement('canvas');
				canvas.width = img.width;
				canvas.height = img.height;
				const ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0, img.width, img.height);
				canvas.toBlob((blob) => {
				  const url = URL.createObjectURL(blob);
				  const a = document.createElement('a');
				  a.href = url;
				  a.download = 'AI-image.jpg'; // 设置下载的文件名
				  a.click();
				  URL.revokeObjectURL(url);
				}, 'image/jpeg');
			  };
			},
		}
	}
</script>

<style lang="scss">
.fx{
	width: 336rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	border: 2px solid #CAFD5C;
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #CAFD5C;
	line-height: 33rpx;
	border-radius: 20rpx;
}
.fx2{
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 33rpx;
	background: #CAFD5C;
	border-radius: 20rpx;
	width: 336rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
}
.g2 view{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	line-height: 33rpx;
	background: #262626;
	border: 1px solid #262626;
	width: 49%;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 78rpx;
}
.g2 view.active{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 33rpx;
	background: #262626;
	border: 1px solid #CAFD5C;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 78rpx;
}
.k1{
	font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255,255,255,0.8);
line-height: 33rpx;
}
.k2{
	font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255,255,255,0.6);
line-height: 30rpx;
padding-bottom: 20rpx;
border-bottom: 1px solid #494949; 
}
.g1{background: #1e1e1e;border-radius: 20rpx;padding: 34rpx;box-sizing: border-box;}
.one .item{
	background: #262626;
	border-radius: 20rpx;
	overflow: hidden;
	width: 48%;
}
.one .item image{width: 100%;}
.one .item view:nth-child(2){
	font-size: 28rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 33rpx;
	padding-left: 18rpx;
	padding-top: 18rpx;
	font-weight: normal;
}
.one .item view:nth-child(3){
	border-radius: 25rpx;
	border: 1px solid #CAFD5C;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 28rpx;
	margin-top: 26rpx;
	text-align: center;
	height: 50rpx;
	line-height: 50rpx;
 
	margin-bottom: 24rpx;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}
.btn1{
	background: #262626;
	color: #fff;
	font-size: 24rpx;
	padding: 5px 8px;
	border-radius: 35rpx;
	margin-right: 24rpx;
	border: 1px solid #262626;
}
.btn1.active{
	border: 1px solid #CAFD5C;
	color: #fff;
}
.btn0{
	background: #cafd5c;
	color: #fff;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 28rpx;
	padding: 5px 16px;
}
.flex10{border-bottom: 0px solid rgba(255,255,255,.2);padding-bottom: 24rpx;}
	.rili-top{
		width: 686rpx;
		//height: 100vw;
	//	//position: absolute;
	//	top: 0;
	//	left: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border-radius: 20rpx;
	}
	.rili-gap{
		width: 100vw;
		height: 686rpx;
	}
	.rili-content{
		position: relative;
		z-index: 10;
		padding:30rpx 32rpx 20rpx 32rpx;
		border-radius: 66rpx;
		.rili-avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.rili-line{
			height: 1rpx;
			margin: 40rpx 0 50rpx 0;
		}
		.rili-tag{
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 16rpx;
			background: linear-gradient(90deg, #04D5A3 0%, #00E2E2 100%);
			border-radius: 20rpx 8rpx 20rpx 8rpx;
		}
		.rili-card{
			width: 308rpx;
			height: 132rpx;
			border-radius: 20rpx;
			padding-left: 40rpx;
		}
	}
	::v-deep .uni-scroll-view, .uni-scroll-view-content {
		background-color: #000000;
	}
	::v-deep .u-drawer__scroll-view {
		height: auto;
	}
	.share-box{
		width: 618rpx;
		color: #000000;
		margin: 0 auto 100px auto;
		.background-image {
			
			height: 794rpx;
			margin: 0 auto 80px auto;
			
			z-index: 1;
		}
		.opus_img{
			width: 558rpx;
			height: 340rpx;
			margin: 240rpx 30rpx 30rpx 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
		
		.info-desc {
			width: 558rpx;
			height: 180rpx;
			border-radius: 20rpx;
			margin: 0 30rpx 30rpx 30rpx;
			padding: 0 20rpx;
			background-color: rgba(0, 0, 0,0.1);
			.info-desc-img {
				width:116rpx; 
				height: 116rpx;
				border: solid 9rpx #ffffff;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}

	.footer-share{
		position: fixed;
		bottom: 0px;
		width: 100%;
		.footer-share-title{
			text-align: center;
		}
		.footer-share-list{
			padding: 50rpx;
			.share-item{
				text-align: center;
			}
		}
	}
</style>